<template>
	<view class="page">
		<!-- 个人资料 -->
		<view class="top">
			<view class="box">
				<view class="person">
					<view class="person-right">
						<u-avatar :src="myuserinfo.headimgurl" :show-level="myuserinfo.rank>0"></u-avatar>
						<view class="personInfo u-flex u-row-between" v-if="isLogin">
							<div>
								<h3 class="colorWhite userName" style="{font-weight:500}" @click="tome">{{myuserinfo.user_name}}</h3>
								<view class="u-font-xs">
									<u-tag :text="roleName[role]" v-if="roleName[role]" shape="circle" size="mini" type="warning" />
										<text style="color: #fff;display: flex;padding-top: 10upx;font-size: 28upx;align-items: center;" @click="tobianji" v-show="myuserinfo.shop_id == 0"><image src="../../static/bianj.png" mode="" style="width: 30upx;height: 30upx;padding-left: 6upx;"></image>编辑</text>
								</view>
							</div>
							<div style="margin-top: 60upx">
								<span @click="$u.route('/pagesB/message/message')">
									<u-icon name="/static/images/icon-newsWhite.png" size="42"></u-icon>
								</span>
							<!-- 	<span @click="$u.route('/pagesB/setting/setting')">
									<u-icon name="setting" class="u-m-l-20" color="#fff" size="54"></u-icon>
								</span> -->
							</div>
						</view>
						<!--  #ifndef  MP-WEIXIN -->
						<view class="login f34 c3 colorWhite" v-if="!isLogin"
							@click="navigateTo('/pagesB/login/login')" style="color: #fff;">登录/注册
							</view>
						<!--  #endif -->
						<!--  #ifdef  MP-WEIXIN -->
						<u-button size="mini" style="margin:0 30upx " shape="circle" type="success"
							  v-if="!isLogin" lang="zh_CN" @click="getWechatUserInfo">请点击登录
						</u-button>
						<!--  #endif -->

					</view>


					<!-- 在小程序里调试用  打开  -->

				</view>

				<view class="topPanelWrap" v-if="false">
					<div>
						<h3 class="topPanelNum">0</h3>
						<p>收藏夹</p>
					</div>
					<div>
						<h3 class="topPanelNum">0</h3>
						<p>关注的店铺</p>
					</div>
					<div>
						<h3 class="topPanelNum">0</h3>
						<p>足迹</p>
					</div>
					<div @click="$u.route({url:'/pagesC/homeSon/allOrder',params:{index:6}})">
						<h3 class="topPanelNum">0</h3>
						<p>全部订单</p>
					</div>
				</view>


			</view>
		</view>


	<!-- 	<div class="integralBox">
			<div class="left integralBoxitem" @click="navigateTo('/pagesB/coupon/coupon')">
				<h4 class="integralBoxtitle">优惠券</h4>
				<p class="integralBoxtip">领券</p>
				<u-icon class="integralBoxicon" :name="cosUrl+'images/icon-wallet2.png'" color="#2979ff" size="88">
				</u-icon>
			</div>
			<div class="right integralBoxitem" @click="$u.route({url:'/pagesC/integral/index',params:{index:6}})">
				<h4 class="integralBoxtitle">积分商城</h4>
				<p class="integralBoxtip">积分优惠</p>
				<u-icon class="integralBoxicon" style="right:10upx" :name="cosUrl+'images/img-scoreGIft.png'"
					color="#2979ff" size="138"></u-icon>
			</div>
		</div> -->

		<!-- 我的订单 -->
		<view class="box">
			<view class="innerBox myOrder">
				<view class="innerLabel" @click="order('/pagesC/homeSon/allOrder',{index:0})">我的订单</view>
				<view class="Orderlist">
					<view class="item" @click="order('/pagesC/homeSon/allOrder',{index:1})">
						<view class="orderMarkNum" v-if="myuserinfo && myuserinfo.pay_num> 0">{{myuserinfo.pay_num}}
						</view>
						<view class="icon">
							<image src="@/static/images/icon-myWaitPay.png"></image>
						</view>
						<view class="text f24 c6">待付款</view>
					</view>
					<view class="item" @click="order('/pagesC/homeSon/allOrder',{index:2})">
						<view class="orderMarkNum" v-if="myuserinfo && myuserinfo.send_num > 0">{{myuserinfo.send_num}}
						</view>
						<view class="icon">
							<image src="/static/images/icon-myWaitDeliver.png"></image>
						</view>
						<view class="text f24 c6">待送货</view>
					</view>
					<view class="item" @click="order('/pagesC/homeSon/allOrder',{index:3})">
						<view class="orderMarkNum" v-if="myuserinfo && myuserinfo.shou_num > 0">{{myuserinfo.shou_num}}
						</view>
						<view class="icon">
							<image src="/static/images/icon-myTakeGoods.png"></image>
						</view>
						<view class="text f24 c6"> 待提货</view>
					</view>
					<view class="item" @click="order('/pagesC/homeSon/allOrder',{index:4})">
						<view class="orderMarkNum" v-if="myuserinfo && myuserinfo.ping_num > 0">{{myuserinfo.ping_num}}
						</view>
						<view class="icon">
							<image src="/static/images/icon-myWaitComment.png"></image>
						</view>
						<view class="text f24 c6">已收揽</view>
					</view>
					<!-- <view class="item" @click="navigateTo('/pagesC/homeSon/tuikuan')">
						<view class="orderMarkNum" v-if="myuserinfo && myuserinfo.huan_num>0">{{myuserinfo.huan_num}}
						</view>
						<view class="icon">
							<image src="/static/images/icon-myWaitReturn.png"></image>
						</view>
						<view class="text f24 c6">退款/退货</view>
					</view> -->

				</view>
			</view>
		</view>




		<!-- 我的服务 -->
<!-- 		<view class="box" v-if="myuserinfo.is_distribution">
			<view class="innerBox">

				<view class="Orderlist">
					<view class="item" @click="navigateTo('/pagesB/distribution/income',1)">
						<view class="icon">
							<image src="../../static/images/service_1.png"></image>
						</view>
						<view class="text f24 c6">我的分销</view>
					</view>
					<view class="item" @click="navigateTo('/pagesB/distribution/myTeam')">
						<view class="icon">
							<image src="../../static/images/service_2.png"></image>
						</view>
						<view class="text f24 c6">我的团队</view>
					</view>
					<view class="item" @click="navigateTo('/pagesB/distribution/commissionList')">
						<view class="icon">
							<image src="../../static/images/service_3.png"></image>
						</view>
						<view class="text f24 c6">佣金明细</view>
					</view>
					<view class="item" @click="navigateTo('/pagesB/distribution/withdrawList')">
						<view class="icon">
							<image src="../../static/images/service_4.png"></image>
						</view>
						<view class="text f24 c6">提现明细</view>
					</view>
				</view>
			</view>
		</view> -->
		<!--  轮播活动页-->
		<!-- <div class="distributorWrap">
			<u-image :src="getapplyDistributorBanner" v-if="myuserinfo.is_distribution===0"
				@click="$u.route('/pagesB/distribution/applyDistributort')" width="100%" height="200"
				border-radius="20"></u-image>
			<button open-type="share" class="inviteBtn" v-else @click="goShare">
				<u-image :src="getImgInviteBanner" width="100%" height="200"></u-image>
			</button>
		</div> -->
		<!-- 必备工具 -->
		<view class="box ">
			<view class="innerBox tools">
				<view class="toolsList">
					<view class="toolsItem" @click="toshipin" v-if="!myuserinfo.rz_zt">
						<view class="icon">
							<image src="../../static/shipin.png"></image>
						</view>
						<view class="text f24 c3">上传视频</view>
					</view>
					<view class="toolsItem" @click="confirm" v-if="!myuserinfo.rz_zt">
						<view class="icon">
							<image src="../../static/images/icon-openShop.png"></image>
						</view>
						<view class="text f24 c3">成为商家</view>
					</view>
					<view class="toolsItem"
						@click="$u.route({url:'/pagesB/seller/index',params:{shop_id:myuserinfo.shop_id}})"
						v-if="myuserinfo.rz_zt==0">
						<view class="icon">
							<image src="../../static/images/icon-shopper.png"></image>
						</view>
						<view class="text f24 c3">商家管理</view>
					</view>
					<view class="toolsItem" @click="navigateTo('/pagesB/coupon/coupon')">
						<view class="icon">
							<image src="../../static/images/icon-area.png"></image>
						</view>
						<view class="text f24 c3">我的劵包</view>
					</view>
					<view class="toolsItem" @click="navigateTo('/pagesB/personalSon/address')">
						<view class="icon">
							<image src="../../static/images/icon-coupon.png"></image>
						</view>
						<view class="text f24 c3"> 收货地址</view>
					</view>

					<view class="toolsItem" @click="showPopUpBox()">
						<view class="icon">
							<image src="../../static/images/icon-kefu.png"></image>
						</view>
						<view class="text f24 c3">客服热线</view>
					</view>


					<view class="toolsItem" @click="navigateTo('/pagesB/personalSon/Application')">
						<view class="icon">
							<image src="../../static/images/icon-tou.png"></image>
						</view>
						<view class="text f24 c3">投诉建议</view>
					</view>
					<view class="toolsItem" @click="goArticle('/pagesB/article/detail','关于我们')">
						<view class="icon">
							<image src="../../static/images/icon10.png"></image>
						</view>
						<view class="text f24 c3">关于我们</view>
					</view>

					<view class="toolsItem" @click="$u.route('/pagesB/setting/setting')">
						<view class="icon">
							<image src="../../static/images/icon8.png"></image>
						</view>
						<view class="text f24 c3">设置</view>
					</view>

				</view>
			</view>
		</view>

		<view class="mask" v-if="showBox" @click="hideMask" catchtouchmove="false"></view>
		<view class="popUpBox" v-if="showBox">
			<view class="tel">
				<image :src="cosUrl+'images/tel.png'"></image>
			</view>
			<view class="text f30 c3" style="margin-top: 33upx;"> 客服热线</view>
			<view class="text f30 c3">{{serviceHotline}}</view>
			<view class="button" @click="dail(serviceHotline)">拨打电话</view>
			<view class="cancel" @click="hideMask()">
				<u-icon name="close-circle" color="#eee" size="48"></u-icon>
			</view>
		</view>
		<share-mask ref="shareMask"></share-mask>
		<u-toast ref="uToast" />

		<u-popup mode="center" length="80%" border-radius="20" v-model="isInviteModelShow">
			<div class="invitePanel">
				<u-avatar size="large" :src="inviterInfo.avatar"></u-avatar>
				<p>邀请人{{inviterInfo.name}}</p>
				<div class="u-flex u-row-between bottom">
					<span @click="isInviteModelShow=false">取消</span>
					<u-button style="width:50%" size="mini" shape="circle" type="success"
						lang="zh_CN" @click="getWechatUserInfo">微信授权登录</u-button>
				</div>
			</div>
		</u-popup>

	</view>
</template>

<script>
	import ShareMask from "../../components/shareMask";

	export default {

		data() {
			return {
				isLogin: false, //判断是否登陆
				newActive1: false,
				newActive2: false,
				newActive3: false,
				isPay: false, //是否付款
				commentNum: '',
				role: '',
				list: [],
				defaultAvatar: '',
				showBox: 0,
				serviceHotline: '',
				token: '',
				myuserinfo: {},
				wxUserInfo:{},
				myHeadStyle: {},
				cosUrl: '',
				bgheadSrc: '',
				isInviteModelShow: false,
				inviterInfo: {}
			}
		},
		components: {
			ShareMask,

		},

		onShow() {
			this.getreadprofile()
			this.getmyApraise();

		},
		//小程序分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			const myuserinfo = this.myuserinfo
			/**
			 * @param {string} name -  分享人名称
			 * @param {string} avatar -  分享人头像
			 * @param {string} id -  分享人id
			 * @description: 分享小程序携带的参数
			 * @date: 15:57
			 */
			const shareData = {
				name: myuserinfo.user_name,
				avatar: myuserinfo.headimgurl,
				id: myuserinfo.id,
			}
			return {
				title: `${myuserinfo.user_name}邀请您注册WoShop`,
				path: '/pages/tabBar/my?wechatShare=' + JSON.stringify(shareData)
			}
		},

		onLoad(data) {

			// #ifdef APP-PLUS
			const currentWebview = this.$scope.$getAppWebview();
			console.log(getCurrentPages())
			// #endif


			this.cosUrl = this.STATICURL
			this.bgheadSrc = `url(${this.STATICURL}images/bg-myHead.jpg)`
			this.token = uni.getStorageSync('token')
			this.getServiceHotline();

			uni.$on('openShareApp', () => {
				this.goShare()
			})
			this.role = uni.getStorageSync('role') || ''; //角色身份
			if (data.wechatShare) {
				console.log(JSON.parse(data.wechatShare))
				this.inviterInfo = JSON.parse(data.wechatShare)
				this.isInviteModelShow = true
			}
			uni.$on('accountLogin', data => {
				console.log("-> data", data);
				this.getreadprofile()
			})
			this.getreadprofile()
		},
		onUnload() {
			uni.$off('openShareApp', () => {})
			uni.$off('accountLogin', () => {})
		},
		computed: {

			getapplyDistributorBanner() {
				return this.STATICURL + 'images/distribution/bg-applyDistributor.jpg'
			},
			getImgInviteBanner() {
				return this.STATICURL + 'images/distribution/img-invite3.png'
			},
			roleName() {
				return {
					shop: '商家',
					user: '普通用户',
					service: '客服',
				}
			},
			getRankName() {
				return this.myuserinfo.rank_name + '会员等级'
			},
		},


		onPullDownRefresh() {
			this.getreadprofile()
		},
		watch: {
			"newActive3": function() {
				this.newActive1 = true;
			},
			myuserinfo: {
				handler(val) {
					let bool = Object.keys(val).length
					if (bool !== 0) {
						this.isLogin = true
					} else {
						this.isLogin = false

					}
				}
			}
		},

		methods: {
			tome(){
			
				if(this.myuserinfo.shop_id == 0){
					uni.navigateTo({
						url:'./mydetail'
					})
				}
			},
			tobianji(){
				if(this.myuserinfo.shop_id == 0){
					uni.navigateTo({
						url:'bianji/index'
					})
				}
			},
			toshipin(){
				uni.navigateTo({
					url:'shipin/index'
				})
			},
			goArticle(url, title) {
				this.$u.route({
					url:url,
					params: {
						title:title
					}
				})
			},
			showPopUpBox() {
				this.showBox = 1;
			},
			hideMask() {
				this.showBox = 0;
			},
			dail(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			getWechatUserInfo() {
				const _this = this
				// console.log("-> ", e);
				uni.getUserProfile({
					desc:'获取用户基础信息',
					lang:'zh_CN',
					success: function (res) {
						const avatarUrl = res.userInfo.avatarUrl
						const gender = res.userInfo.gender
						const nickName = res.userInfo.nickName
						const inviterID = Object.keys(_this.inviterInfo).length > 0 ? _this.inviterInfo.id : '' //邀请人用户id, 没有邀请人为空
						_this.$u.route({
							url: "/platforms/mp-weixin/miniLogin",
							params: {
								nickName:nickName,
								gender:gender,
								avatarUrl:avatarUrl,
								inviterID:inviterID
							},
						})
						_this.isInviteModelShow = false
					}
				})

				// if (e.detail.errMsg === 'getUserInfo:ok') {
					// const {
					// 	avatarUrl,
					// 	gender,
					// 	nickName
					// } = this.wxUserInfo
					
				// }
				//获取微信用户信息

			},
			confirm() {

				this.$http.getpanduan().then(res => {

					if (res.status == 200) {
						if (res.data.zhuangtai == 2) { // 进入审核流程状态页
							this.getnav('/pagesB/moneyCartSon/Settledin')

						// } else if (res.data.zhuangtai == 4) {
						// 	this.getnav('/pagesC/loginSon/settingWx')
						} else {
							this.getnav('/pagesB/personalSon/TradingType')
						}
					}
				})

			},
			checkUpdate() {
				const res = uni.getSystemInfoSync()
				const apptype = res.platform
				if (this.isNew) {
					autoUpdater.init({
						packageUrl: this.res.url,
						content: this.res.note,
						contentAlign: 'left',
						cancel: '取消',
						cancelColor: '#007fff'
					})
					autoUpdater.show()
				} else {
					this.$toast('当前已是最新版本')
				}
			},
			navigateToArticle(url) {
				if (this.isLogin == 1) {
					uni.navigateTo({
						url: '/pagesB/article/detail?title=' + '' + url,
					})
				} else {
					this.$navigateTo('/pagesB/login/login')
				}
			},
			navigateTo(url, type) {

				if (this.isLogin == 1) {
					this.$navigateTo(url)
				} else {
					// #ifndef MP-WEIXIN
					this.$navigateTo('/pagesB/login/login')
					// #endif
					// #ifdef MP-WEIXIN
					this.$navigateTo('/platforms/mp-weixin/miniLogin')
					// #endif
				}

			},
			async goShare() {
				// #ifdef MP-WEIXIN
				return false;
				// #endif
				const data = await this.getShareData()
				const mask = this.$refs['shareMask']
				mask.shareTit = data.title; //分享标题
				mask.shareLink = `${data.linkurl}?inviter=${this.myuserinfo.id}`; // 分享参数字段 inviter
				mask.shareText = data.content + mask.shareLink; //分享文字内容


				mask.shareImg = await data.tgimg; //分享图片
				mask.shareModel = true //分享弹窗打开

			},
			// 获取分享数据
			getShareData() {
				return new Promise((resolve, reject) => {
					this.$http.getShareData().then(res => {
						if (res.status === 200) {
							resolve(res.data)
						} else {
							reject(res)
						}
					})

				})
			},
			getreadprofile() {
				this.$http.getreadprofile().then(res => {
					if (res.status == 200) {
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						console.log(JSON.stringify(res.data))
						this.myuserinfo = res.data;
						this.isLogin = 1;
						// vuex 提交用户信息
						this.$store.commit('setUserInfo', res.data)

					}
				})
			},
			getServiceHotline() {
				this.$http.getserviceHotline().then(res => {
					if (res.status == 200) {
						this.serviceHotline = res.data.serviceHotline;

					}
				})
			},
			getmyApraise() {
				this.$http.getmyApraise().then(res => {
					if (res.status == 200) {
						this.commentNum = res.data.count
					}else{
						uni.showToast({
							title:res.mess,
							icon:'none'
						})
					}
				})
			},
			// 跳转至订单列表页面
			order(url, data) {
				if (this.isLogin == 1) {
					this.$navigateTo(url, data)
				} else {
					this.$navigateTo('/pagesB/login/login')
				}
			},

		},

	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/mixins.scss';
	@import '~uview-ui/index.scss';

	.page {
		// padding-bottom: 100upx;
		position: relative;
		height: 100vh;
		overflow-y:auto;
		background-color: #0F111E;
		.headBg {
			position: absolute;
			width: 100%;
			height: 340upx;
			z-index: -1;
		}

		.shopCart {
			position: fixed;
			bottom: 140upx;
			right: 38upx;
			display: inline-block;
			z-index: 9999;
			animation: breathe 2s infinite;

			.dot {
				padding: 4upx;
				border-radius: 100upx;
				background-color: #FE3536;
				display: inline-block;
				color: #ffffff;
				position: absolute;
				right: -4upx;
				top: -4upx;
				width: 22upx;
				height: 22upx;
				font-size: 20upx;
				text-align: center;
				line-height: 22upx;
			}

			image {
				width: 60upx;

			}

			@keyframes breathe {
				0% {
					transform: scale(1)
				}

				50% {
					transform: scale(1.2)
				}

				100% {
					transform: scale(1)
				}
			}
		}

		.topBar {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			color: #fff;
			height: 141upx;
			z-index: 3;
			background-size: cover;

			.nav {
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 36upx;
				}

				.nav-left {
					font-size: 28upx;
					position: absolute;
					right: 32upx;
				}
			}
		}

		.header {
			width: 100%;
			height: 409upx;
			position: absolute;
			left: 0;
			top: 0;
			background-image: linear-gradient(to right, #fa3f3f, #ff6262);
			background-size: cover;

		}

		.top {
			padding: 0;
			position: relative;
			background-color: #0F1022;
			.box {

				display: flex;
				flex-direction: column;
				// background-color: #333;
				padding: 76upx 30upx 50upx;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.person {
					display: flex;
					align-items: center;
					padding: 48upx 0;
					justify-content: space-between;

					.person-right {
						display: flex;
						align-items: center;
						width: 100%;

						.avatar {
							width: 120upx;
							height: 120upx;
							border-radius: 400px;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								background-color: #acb0b3;
							}

						}
					}

					.rechargeBtn {
						display: inline-block;
						padding: 6upx 24upx;
						background: #fff;
						color: #555;
						border-radius: 100upx;
						display: flex;
						align-items: center;
						box-shadow: 0 0 20upx #e2e3e4;

						.signIn {
							width: 32upx;
							height: 32upx;
							margin-right: 6upx
						}
					}

					.personInfo {
						margin-left: 25upx;
						flex: 1;
						color: #fff;

						.vipBadgeBox {
							display: inline-block;
							padding: 0 10upx;
							background: linear-gradient(to right, #ffa468, #fa3f3f);
							border-radius: 100px;
							color: #fff;
							font-weight: 600;
							text-align: center;

							.vipBadge {
								display: inline-block;
								width: 36upx;
								height: 36upx;
								font-size: 10px;
								border-radius: 200px;
								background-color: #ffa468;
								box-shadow: inset 0 4px 4px #ffa468;
								padding: 4upx;
								border: 5upx solid #ff771e;
								margin-right: 8upx
							}
						}

						.name {
							font-size: 38upx;
							font-weight: 500;
							display: flex;
						}

					}

					.login {
						margin-left: 16upx;
						font-weight: 500;
						font-size: 34upx;
					}
				}

				.menus {
					flex: 1;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					margin-top: 16upx;

					.item {
						text-align: center;
						flex: 1;

						.volum {
							position: relative;
							line-height: 37upx;
							font-weight: 500;
							font-size: 28upx;

							.markDot {
								width: 12upx;
								height: 12upx;
								background: red;
								border-radius: 200upx;
								position: absolute;
								top: -4upx;
							}
						}

						.label {
							line-height: 37upx;
							margin-top: 8upx;
						}
					}
				}
			}
		}

		.box {
		
			position: relative;
			// box-shadow: 0 0 20upx #ebeef3;
			// padding: 0 30upx;
			background: #0F111E;
			.innerBox {
				// background: #242730;
				// border-radius: 20upx;
				// padding: 0 4vw;
				// height: 254rpx;
				// background-color: #242730;
				border-radius: 10rpx;
				margin-top: -1px;
				.tools {
					padding-bottom: 0;
					// margin-top: 30rpx;
				}

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.titleLeft {
						line-height: 40upx;
						font-weight: 600
					}

					.titleRight {
						display: flex;
						align-items: center;

						.more {
							margin-left: 12upx;
						}
					}

				}

				.Orderlist {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;

						.orderMarkNum {
							position: absolute;
							top: -6upx;
							right: -12upx;
							background-color: #F95658;
							color: #ffffff;
							width: 26upx;
							height: 26upx;
							text-align: center;
							line-height: 26upx;
							border-radius: 100upx;
							font-size: 20upx;
							z-index: 99;
						}

						.icon {
							width: 56upx;
							height: 56upx;

							image {
								width: 56upx;
								height: 56upx;
							}
						}

						.text {
							line-height: 33upx;
							margin-top: 6upx;
						}

					}
				}

				.toolsList {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					// margin-top: 24upx;

					.toolsItem {
						width: 33.3%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-bottom: 28upx;
						position: relative;

						.payNote {
							position: absolute;
							top: -16upx;
							right: -16upx;
							background-color: #FA3E3F;
							border-radius: 200upx;
							border-bottom-left-radius: 0;
							padding: 0px 12upx;
							font-size: 20upx;
							color: #FFFFFF;

						}

						.icon {
							// width: 64upx;
							// height: 64upx;
							// border-radius: 100px;
							// overflow: hidden;

							image {
								width: 42rpx;
								height: 42rpx;
							}
						}

						.text {
							line-height: 33upx;
							margin-top: 16upx;
						}
					}
				}
			}
		}

		.tabs {
			display: flex;
			margin: 20upx 0;
			padding: 0 32upx;
			justify-content: space-between;

			.tabItem {
				position: relative;

				&:first-child {
					.bg {
						width: 328upx;
						height: 246upx;
					}

					.innerContent {
						.title {
							color: #C89D40;
						}

						.descripe {
							color: #C89D40;
							width: 204upx;
						}
					}
				}

				&:last-child {
					.bg {
						width: 330upx;
						height: 248upx;
					}

					.innerContent {
						.title {
							color: #92AFD4;

						}

						.descripe {
							color: #92AFD4;
							width: 190upx;
						}
					}
				}

				.innerContent {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					padding: 28upx;

					.title {
						line-height: 40upx;
						padding-top: 22upx;
						padding-bottom: 25upx;
						font-weight: bold;
					}

					.descripe {
						line-height: 33upx;
					}

					.viewMore {
						display: flex;
						justify-content: flex-end;

						.icon {
							width: 44upx;
							height: 44upx;
						}
					}
				}
			}
		}

		.mask {
			position: fixed;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.3);
			z-index: 4;
		}

		.popUpBox {
			position: fixed;
			width: 402upx;
			height: 452upx;
			background: #fff;
			z-index: 5;
			border-radius: 20upx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.tel {
				text-align: center;
				margin-top: -25upx;

				image {
					width: 174upx;
					height: 174upx;
				}
			}

			.text {
				line-height: 43upx;
				font-weight: bold;
				text-align: center;
			}

			.button {
				width: 247upx;
				height: 66upx;
				border-radius: 45upx;
				position: absolute;
				bottom: 36upx;
				left: 50%;
				transform: translate(-50%, 0)
			}

			.cancel {
				width: 53upx;
				height: 53upx;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);
				bottom: -75upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.wechatLoginBtn {
		font-size: 24upx;
		border: none;
		color: #fff;
		background-image: linear-gradient(to right, #ffa468, #fa3f3f);
		border-radius: 200upx;
		margin-left: 20upx
	}

	.iconWrap {
		display: flex;
		align-items: center;
		font-size: 28upx;

		.setting {
			width: 36upx;
			height: 36upx;
		}
	}

	.loginWrap {
		padding-top: 90upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 999;
		text-align: center;

		.tips {
			color: #999
		}

		.login {
			background: #ffd400;
			padding: 15upx 100upx;
			font-size: 32upx;
			margin-top: 30upx;
			display: inline-block;
		}
	}

	.userName {
		font-weight: 600;
		font-size: 32upx;
	}

	.distribution {
		background-color: #fff;
		border-radius: 16upx;
		padding: 15upx 0;
	}

	.swiperBox {
		margin: 12upx 30upx;
	}

	.distributorWrap {

		padding: 10upx 30upx;

		.inviteBtn {
			background-color: transparent;

			&::after {
				border: none;
			}
		}
	}

	.topPanelWrap {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 20upx;
		color: #fff;

		.topPanelNum {
			font-size: 32upx;
			font-weight: 800;
		}
	}

	.topPanelWrap {
		display: flex;
	}

	.integralBox {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 20upx 30upx;
		margin: -35upx 30upx 15upx;
		border-radius: 20upx;
		z-index: 100;
		position: relative;

		&title {
			font-size: 30upx;
		}

		&item {
			position: relative;
			flex: 1;

		}

		&icon {
			position: absolute;
			top: 50%;
			right: 28upx;
			transform: translateY(-50%);
		}

		&tip {
			color: #a6aaad;
			font-size: 24upx;
		}
	}

	.invitePanel {
		text-align: center;
		padding: 50upx 20upx;

		.bottom {
			margin-top: 50upx;

			span {
				width: 50%;
				text-align: center;

				&:first-child {
					color: #7b7b7b
				}

				&:nth-child(2) {
					color: #19be6b
				}
			}
		}
	}
	.myOrder{
		height: 254rpx;
		width: 94vw;
		margin: 0 3vw;
		background-color: #242730;
		border-radius: 15rpx!important;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.innerLabel{
			font-size: 30rpx;
			color: #f5f5f5;
			width: 100%;
			padding: 30rpx 15rpx;
			position: relative;
			height: 40%;
			&::after{
				position: absolute;
				content: '';
				width: 10px;
				height: 10px;
				border-top: 3px solid #999999;
				border-right: 3px solid #999999;
				transform: rotate(45deg);
				top: 35rpx;
				right: 35rpx;
			}
			&::before{
				position: absolute;
				content: '';
				width: 94%;
				left: 3%;
				height: 1px;
				bottom: 0;
				background-color: #666666;
			}
		}
		.Orderlist{
			padding: 20rpx 0;
			justify-content: space-around!important;
			.text{
				color: #f5f5f5;
				margin-top: 15rpx!important;
			}
		}
	}
	.box{
		.tools{
			padding-top: 30rpx;
			.toolsList{
				background-color: #242730;
				border-radius: 10rpx;
				padding: 15rpx;
				width: 94vw;
				margin: 0 3vw;
				flex-direction: column!important;
				.toolsItem{
					position: relative;
					width: 100%!important;
					flex-direction: row!important;
					align-items: center;
					margin: 15rpx 0;
					justify-content: flex-start!important;
					.text{
						color: #ffffff;
						margin: 0 0 0 15rpx!important;
						font-size: 30rpx;
					}
					&::after{
						position: absolute;
						content: '';
						width: 10px;
						height: 10px;
						border-top: 2px solid #999999;
						border-right: 2px solid #999999;
						transform: rotate(45deg);
						top: 15rpx;
						right: 0rpx;
					}
					&::before{
						position: absolute;
						content: '';
						width:100%;
						left: 0%;
						height: 1px;
						bottom: -15rpx;
						background-color: #333;
					}
				}
			}
		}
	}
</style>
